<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">
        总分红：
        <input type="text" v-model.number="and">

        <div>
            <!-- 30% -->
            <span>张三:</span>
            <span>所得：{{obj.one}}</span>
        </div>
        <div>
            <!-- 12% -->
            <span>李四:</span>
            <span>所得：{{obj.two}}</span>
        </div>
        <div>
            <!-- 26% -->
            <span>王五:</span>
            <span>所得：{{obj.three}}</span>
        </div>


    </div>


    <script>

        let vm = new Vue({
            // 数据层
            el: "#app", //选择器
            data: {  //存放数据 存放变量
               val:"",
               and:0,
               obj:{
                one:0,
                two:0,
                three:0
               }
            },
            // watch
            // 不支持缓存
            // 支持异步
            // 监听函数可以接收到两个参数 一个最新的值，一个是更新之前的值
            
            watch:{
                and(n,o){
                    // this.and
                    this.obj.one = this.and*0.3;
                    this.obj.two = this.and*0.12;
                    this.obj.three = this.and*0.26;
                },
                val(n,o){
                    // setTimeout(() =>{
                    //     console.log(n,o);
                    // },1000)
                    // 第一个参数 是 最新的值
                    // 第二个参数 是 修改之前的值
                }
            },
            methods: { //用来定义方法的地方

            }
        })



    </script>



</body>

</html>